<template>

	<view>
		<!-- <u-navbar class="nav" :border-bottom="false" title="条件选车	" title-size="32" title-width="500"></u-navbar> -->
		<u-sticky offset-top="0">
			<view class="item">
				<u-dropdown ref='paymentSort' style="background-color: #fff;" active-color='#FBB000' @open='open'
					@close="close" :class="isOpen ? 'down-open':'down-close'">

					<!-- 排序 -->
					<u-dropdown-item :title="sortTitle">
						<view class="dropdown">
							<view v-for="(item,index) in sort" :key='item.id' class="cell-list" @click="onSort(item)">
								<view :class="{'active': sortValue === item.id}">{{item.name}}</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="品牌">
						<view style="background-color: #FFFFFF;">
							<brand-list @close="closePayment" @change="brandListChange" :height="1000+'rpx'">
							</brand-list>
						</view>
					</u-dropdown-item>

					<!-- 价格 -->
					<u-dropdown-item :title="priceTitle">
						<view class="dropdown">
							<view v-for="(item,index) in price" :key='item.id' class="cell-list"
								@click="priceSort(item)">
								<view :class="{'active': priceValue === item.id}">{{item.name}}</view>
							</view>
						</view>
					</u-dropdown-item>

					<!-- 购车类型 -->
					<u-dropdown-item :title="carTitle">
						<view class="dropdown">
							<view v-for="(item,index) in type" :key='item.id' class="cell-list" @click="typeSort(item)">
								<view :class="{'active': typeValue === item.id}">{{item.name}}</view>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>

				<!-- 重置 -->
				<view class="reset">
					<scroll-view scroll-x='true' class="scroll ">
						<view class="reset-history flex flex-ai-c">
							<view class="reset-name flex flex-jc-c" v-show="history.brand">
								<view>{{history.brand}}</view>
								<view @click="delBrand">
									<i-icon icon="iconguanbi" size="26rpx"></i-icon>
								</view>
							</view>
							<view class="reset-name flex flex-jc-c" v-show="history.price">
								<view>{{history.price}}</view>
								<view @click="delPrice">
									<i-icon icon="iconguanbi" size="26rpx"></i-icon>
								</view>
							</view>
							<view class="reset-name flex flex-jc-c" v-show="history.type">
								<view>{{history.type}}</view>
								<view @click="delType">
									<i-icon icon="iconguanbi" size="26rpx"></i-icon>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="reset-right flex flex-ai-c" @click="reset">
						<view style="margin-right: 10rpx;">
							<i-icon icon="iconzhongzhi" size="27rpx"></i-icon>
						</view>
						<view>重置</view>
					</view>
				</view>

			</view>
		</u-sticky>
		<page-loading :show='pageLoading'>
			<view class="content">
				<view>
					<carList :carlist='carlist'></carList>
				</view>

				<view class="defaultMap" v-show="isDefault">
					<image src="https://files.yzsheng.com/bussiness/imgs/tu@2x.png"></image>
					<view class="texna">
						暂无更多信息，看看其他的吧
					</view>
				</view>
				<u-loadmore :status="loadStatus" v-show="!isDefault" @loadmore="more" margin-top="50" />
			</view>
		</page-loading>
	</view>

</template>

<script src='./condition.js'>

</script>

<style lang="scss" scoped>
	@import '../downPayment/downPayment.scss';

	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 750rpx;
		height: 85vh;
		text-align: center;

		image {
			width: 263rpx;
			height: 277rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.dropdown {
		background-color: #fff;
		background: #FFFFFF;
		border-radius: 0px 0px 20rpx 20rpx;

	}

	.cell-list {
		line-height: 90rpx;
		text-align: center;
	}
</style>
